<template>
  <div class="flex flex-col">
    <a-card
      class="flex-1 rounded overflow-x-auto"
      :body-style="{ padding: '12px 16px', height: '100%' }"
      :bordered="false"
    >
      <div class="mb-2 flex justify-end">
        <a-button type="primary" icon="plus" class @click="add">{{
          $t("user.v134")
        }}</a-button>
      </div>
      <a-table
        ref="table"
        size="middle"
        class="h-full"
        :dataSource="list"
        :pagination="pagination"
        @change="tableChange"
        :loading="listLoading"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
      >
        <a-table-column
          key="ApprovalName"
          data-index="ApprovalName"
          width="200px"
        >
          <span slot="title">{{ $t("user.v131") }}</span>
        </a-table-column>
        <a-table-column
          key="ApprovalAlias"
          data-index="ApprovalAlias"
          width="200px"
        >
          <span slot="title">{{ $t("user.v132") }}</span>
        </a-table-column>
        <a-table-column
          key="ApprovalCreatetime"
          data-index="ApprovalCreatetime"
          width="200px"
        >
          <span slot="title">{{
            $t("user.verification-code.required111566131")
          }}</span>
        </a-table-column>
        <a-table-column
          key="ApprovalUserList"
          :title="$t('user.v133')"
          width="200px"
        >
          <template slot-scope="record">
            <template v-if="record.ApprovalUserList.length > 0">
              <a-tag
                v-for="tag in record.ApprovalUserList"
                :key="tag"
                color="green"
                >{{ tag.label }}</a-tag
              >
            </template>
          </template>
        </a-table-column>
        <a-table-column
          key="action"
          :title="$t('app.setting.othersettings')"
          align="center"
        >
          <template slot-scope="text, record">
            <span>
              <a-button type="link" block @click="edit(record)">{{
                $t("user.verification-code.required11156611014")
              }}</a-button>
              <a-popconfirm
                :title="$t('user.verification-code.required111566110577225')"
                :ok-text="$t('user.v15')"
                :cancel-text="$t('user.email.required11')"
                @confirm="() => del(record.Id)"
              >
                <a-button type="link" block>{{
                  $t("menu.exception.trigger")
                }}</a-button>
              </a-popconfirm>
            </span>
          </template>
        </a-table-column>
      </a-table>
    </a-card>
    <saveGroups ref="save" @succeed="init"></saveGroups>
  </div>
</template>

<script>
import { delGroupsList, getGroupsList } from "@/api";
import saveGroups from "./components/save.vue";
export default {
  components: {
    saveGroups,
  },
  data() {
    return {
      /**分页 */
      pagination: {
        current: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
        showTotal: (total) =>
          this.$t({ total }, "user.verification-code.required111566110577217"),
      },
      listLoading: false,
      list: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      this.getList();
    },
    //分页
    tableChange(pagination) {
      console.log(pagination);
      this.pagination = pagination;
      this.getList();
    },
    async getList() {
      this.listLoading = true;
      const { current, pageSize } = this.pagination;
      try {
        const { data } = await getGroupsList({
          page: current,
          pageSize,
          ApprovalType: 1,
        });
        const { Page, PageSize, Total, Lists } = data;
        this.list = Lists || [];
        this.pagination = {
          current: Page,
          pageSize: PageSize,
          total: Total,
        };
      } catch (error) {
        this.$message.error(error);
        console.log(error);
      } finally {
        this.listLoading = false;
      }
    },
    add() {
      this.$refs.save.open(0);
    },
    edit(record) {
      this.$refs.save.open(1, record);
    },
    async del(Id) {
      await delGroupsList({ Id });
      this.getList();
      this.$message.success(
        this.$t("user.verification-code.required111566110577133")
      );
      this.init();
    },
  },
};
</script>

<style></style>